{% extends 'base_auth.html' %}
{% load static %}

{% block css %}
<link rel="stylesheet" href="{% static 'css/login.css' %}">
<style>
    #verify-code {
        width: 100px;
        top: 0px;
    }
</style>
{% endblock %}


{% block content %}
<div class="card shadow-lg">
    <div class="card-body">
        <h5 class="card-title text-center py-3">YouYu 用户登录</h5>
        {% include 'partials/messages.html' %}
        <form action="{% url 'login' %}" method="post">
            {% csrf_token %}
            <div class="form-group inputZone">
                {% with error=form_obj.username.errors.0 %}
                <img src="{% static 'img/account.svg' %}">
                <input type="text" class="form-control {% if error %}is-invalid{%endif%}" value="{{ values.username }}"
                    name="username" placeholder="用户名">
                <span class="invalid-feedback">{{ error }}</span>
                {% endwith %}
            </div>
            <div class="form-group inputZone">
                {% with error=form_obj.password.errors.0 %}
                <img src="{% static 'img/lock.svg' %}">
                <img src="{% static 'img/eye.svg' %}" id="hide-password">
                <input type="password" id="password" class="form-control {% if error.0 %}is-invalid{%endif%}"
                    name="password" placeholder="密码">
                <span class="invalid-feedback">{{ error }}</span>
                {% endwith %}
            </div>
            <div class="row form-group">
                <div class="col">
                    <input type="text" name="verify" value="" placeholder="验证码" class="form-control" autocomplete="off">
                </div>
                <div class="col">
                    <img src="" id="verify-code">
                </div>
            </div>
            <div class="text-center">
                <button type="submit" class="btn btn-primary">登录</button>
            </div>
            <p id="gotoregister">没有账户, <a href="{% url 'register' %}">立即注册</a></p>
            <p id="reset-password">忘记密码, <a href="{% url 'forget-password' %}">重置密码</a></p>

        </form>
    </div>
</div>


{% endblock %}

{% block js %}
<script src="{% static 'js/login.js' %}"></script>

<script>
    const verifyImg = document.getElementById('verify-code')
    verifyImg.addEventListener('click', getVerifyCode)
    function getVerifyCode() {
        fetch('/authentication/get-verify-code')
            .then(response => response.arrayBuffer())
            .then(arrayBuffer => {
                console.log(arrayBuffer)
                const base64String = window.btoa(String.fromCharCode(...new Uint8Array(arrayBuffer)))
                // 更新img标签的src属性值，以显示图像
                verifyImg.src = "data:image/gif;base64, " + base64String;
            });
    }

    getVerifyCode();
</script>

{% endblock %}